<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2.1.jQuery基本使用-jQuery对象和DOM对象 不能相互调用</title>
    <script src="jquery.min.js"></script>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div></div>
    <span></span>
    <script>
        // 1.DOM对象：用原生js获取的对象就是DOM对象
        var myDiv = document.querySelector('div');      // myDiv 是DOM对象
        var mySpan = document.querySelector('span');    // myDiv 是DOM对象
        console.dir(myDiv);

        // 2.jQuery对象：用jQuery方式获取过来的对象就是jQuery对象。本质：通过$把DOM元素进行了包装(伪数组形式存储)
        $('div'); //   $('div') 是一个jQuery 对象
        $('span'); //  
        console.dir($('div'));

        // 3.jQuery对象只能使用 jQuery 方法，DOM 对象则使用原生的 js 属性和方法
        // myDiv.style.display = 'none';
        // $('div').myDiv.style.display = 'none';  这个 $('div')是jQuery对象 不能使用原生js的属性和方法
        // myDiv.hid();     myDiv是一个DOM对象，不能使用 jQuery里面的hide()隐藏方法
    </script>
</body>

</html>